<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            background-color: #ff4834;
            width: 50px;
            height: 50px;
            display: inline-block;
            color: white;
            overflow: hidden;
        }
    </style>
</head>
<body>
      <input type="text" width="200px" id="input">
      <button id="left-in">左侧入</button>
      <button id="right-in">右侧入</button>
      <button id="left-out">左侧出</button>
      <button id="right-out">右侧出</button>
      <ul id="ul-list"></ul>
  <script>
      var put=document.getElementById("input");
      var left_in=document.getElementById("left-in");
      var right_in=document.getElementById("right-in");
      var left_out=document.getElementById("left-out");
      var right_out=document.getElementById("right-out");
      var ul=document.getElementById("ul-list");
      
      left_in.onclick=function () {
          if (put.value==""){
              alert("请输入文字");
          }
          else {
              var li=document.createElement("li");
              li.innerHTML=put.value;
              ul.insertBefore(li,ul.firstChild)
          }
      }
      right_in.onclick=function () {
          if (put.value==""){
              alert("请输入文字");
          }
          else {
              var li=document.createElement("li");
              li.innerHTML=put.value;
              ul.appendChild(li);
          }
      }
      left_out.onclick=function () {
          ul.removeChild(ul.firstChild);
      }
      right_out.onclick=function () {
          ul.removeChild(ul.lastChild);
      }
      ul.addEventListener("click",function () {
          if (event.target.nodeName.toLowerCase()=="li"){
            ul.removeChild(event.target);
          }
      })
  </script>
</body>
</html>